<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="发货列表">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-select title="商户号" :sreach="true" :up-table="true" :options="mchtList"
                                     name="mchtId"></form-select>
                        <form-date-time title="订单开始日期" :up-table="true" name="beginTime"></form-date-time>
                        <form-date-time title="订单结束日期" :up-table="true" name="endTime"></form-date-time>
                        <form-select title="发货状态" :sreach="true" :up-table="true" :options="stateOptions"
                                     name="orderState"></form-select>
                        <form-input title="订单号" :up-table="true" name="orderId" class="orderNum"></form-input>
                        <form-input title="快递单号" :up-table="true" name="expressNum" class="express_num"></form-input>

                        <span class="pull-right">
                            <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                            <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                        </span>
                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <modal-container title="编辑" v-el:modal v-ref:modal class="edit-modal" theme="small_window">
            <form @submit.prevent @reset.prevent v-el:mform>
                <div class="modal-body">
                    <table-modal :item="item" :columns-set="columnsSet" :columns-num="1"></table-modal>
                </div>

                <div class="modal-footer">
                    <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                    <v-button theme="primary" type="submit">保存</v-button>
                </div>
            </form>

        </modal-container>
        <modal-container title="详情" v-el:detail-modal v-ref:detail-modal class="edit-modal">
            <form @submit.prevent @reset.prevent v-el:detail-mform>
                <div class="modal-body">
                    <!-- <table-modal :item="item" :columns-set="columnsDetailSet"></table-modal> -->
                    <table class="table table-bordered table-hover">
                        <tr>
                            <td style="width:50%">订单编号</td>
                            <td>{{item.orderId}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户名称</td>
                            <td>{{item.mchtName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">电子券名称</td>
                            <td>{{item.name}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">电子券张数</td>
                            <td>{{item.couponNum}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">电子券抵扣金额</td>
                            <td>{{item.couponAmt}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">用户号</td>
                            <td>{{item.usrId}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">发货状态</td>
                            <td>
                                {{(item.orderState == 'unship' && '未发货') || (item.orderState == 'shipped' && '已发货') || (item.orderState == 'receive' && '确认收货')}}
                            </td>
                        </tr>
                        <tr>
                            <td style="width:50%">快递名称</td>
                            <td>{{item.expressCompany}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">快递单号</td>
                            <td>
                                {{item.expressNum}}
                            </td>
                        </tr>
                        <tr>
                            <td style="width:50%">订单日期</td>
                            <td>{{item.orderDate}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">收货人</td>
                            <td>{{item.receName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">收货手机</td>
                            <td>{{item.receMobile}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">收货地址</td>
                            <td>
                                {{item.receAddress}}
                            </td>
                        </tr>
                        <tr>
                            <td style="width:50%">发货员工</td>
                            <td>{{item.tlrNo}}</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                </div>
            </form>
        </modal-container>
        <!-- /.row -->
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn + .btn {
        margin-right: 10px;
    }

    .form-inline #labelName {
        margin-left: 2% !important;
    }
</style>

<script>
    //解决datatables弹窗警告
    $.fn.dataTable.ext.errMode = 'none';
    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'

    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js";
    import {dateTransform} from "lib/method.js"

    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            item: {},
            columnsSet: [],
            mchtList: [],
            stateOptions: [
                {key: '全部', value: ''},
                {key: '已发货', value: '1'},
                {key: '待发货', value: '0'},
                {key: '确认收货', value: '2'}
            ]
        }),
        methods: {
            //还原弹出框位置
            resetBindDrag () {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function () {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function () {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            },
            getMcht () {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: '/api/v2' + projectName_Url + '/list/mcht/' + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    if (list.length == 1) {
                        list.unshift({key: "商户", value: ""});
                        self.$set("mchtList", list);
                    } else {
                        list.unshift({key: "所有商户", value: ""});
                        self.$set("mchtList", list);
                        self.mchtIdValue = list[0].value
                    }
                }, error => {
                });
            }
        },
        created () {
            //datatable所用数组
            columnsSet = [{
                title: "订单编号",
                data: "orderId",
                edit: true,
                readonly: true,
                className: "operate"
            }, {
                title: "商户名称",
                data: "mchtName",
                className: "operate"
            }, {
                title: "电子券名称",
                data: "name",
                className: "operate"
            }, {
                title: "发货状态",
                data: "orderState",
                className: "operate",
                render: function (data) {
                    if (data == "unship") {
                        return data = "待发货"
                    } else if (data == 'shipped') {
                        return data = "已发货"
                    } else {
                        return data = '确认收货'
                    }
                }
            }, {
                title: "快递名称",
                data: "expressCompany",
                edit: true,
                visible: false,
                className: "operate"
            }, {
                title: "快递单号",
                data: "expressNum",
                edit: true,
                visible: false,
                className: "operate"
            }, {
                title: "发货员工",
                data: "tlrNo",
                visible: false,
                className: "operate"
            }, {
                title: "订单日期",
                data: "orderDate",
                className: "operate",
                render: function (data) {
                    return dateFormat(data)
                }
            }, {
                title: "相关操作",
                className: "operate",
                width: "160px",
                render: function (value, type, row) {
                    if (row.orderState == 'unship') {
                        return `
                    <button type="button" class="btn btn-primary btn-sm edit">发货</button>
                    <button type="button" class="btn btn-defalt btn-sm detail">详情</button>
                     `
                    } else {
                        return `
                    <button type="button" class="btn btn-defalt btn-sm detail">详情</button>
                     `
                    }
                }
            }]
        },
        ready: async function () {
            dateTime({
                format: "yyyy-mm-dd",
                minView: "2",
                startDate: "",
                endDate: ""
            })
            this.$set("columnsSet", columnsSet)
            var self = this;
            self.getMcht();
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function (data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //发送请求
                    var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                    //对订单日期进行数据处理
                    _data.beginTime = _data.beginTime.replace(/-/g, "");
                    _data.endTime = _data.endTime.replace(/-/g, "");
                    //判断日期
                    if (_data.beginTime.length > 0 && _data.endTime.length > 0) {
                        if (_data.beginTime - _data.endTime > 0) {
                            Midway.alert({title: "操作提示", content: '订单开始日期不能大于订单结束日期'})
                            // return false
                        }
                    } else if (_data.beginTime.length > 0 && _data.endTime.length <= 0) {
                        Midway.alert({title: "操作提示", content: '订单结束日期不能为空'})
                        // return false
                    } else if (_data.beginTime.length <= 0 && _data.endTime.length > 0) {
                        Midway.alert({title: "操作提示", content: '订单开始日期不能为空'})
                        // return false
                    }
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/txn/findOrderDelivery/" + mchtId,
                        data: _data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    callback({
                        recordsTotal: result.content.total,
                        recordsFiltered: result.content.total,
                        data: result.content.result || []
                    })
                }
            });


            $(self.$el).on("click", ".edit", function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                self.item = dataArray;
                dateTime()
                //编辑框验证、保存、提交
                $(self.$els.mform).validate(self.item.valdate = {
                    async submitHandler () {
                        var form = self.$els.mform;
                        var _data = serialize(form, {hash: true, disabled: true, empty: true});
                        _data.mchtId = dataArray.mchtId;
                        _data.tlrNo = '@' + JSON.parse(localStorage.getItem("id_token")).oprId;
                        var result = await self.$post({
                            url: "/api/v2" + projectName_Url + "/plat/txn/ship",
                            data: _data,
                            method: "POST"
                        });
                        Midway.alert({title: "操作提示", content: result.errorInfo})

                        dataTable.ajax.reload(null, false);
                        $(self.$els.modal).modal('hide');
                        self.resetBindDrag()
                    },
                    rules: {
                        expressCompany: {
                            required: true
                        },
                        expressNum: {
                            required: true,
                            int: true,
                            maxlength: 32
                        },
                        mchtId: {
                            required: true,
                            readonly: true
                        },
                        orderId: {
                            required: true,
                            readonly: true
                        },
                        tlrNo: {
                            required: true
                        }
                    }
                });
                $(self.$els.modal).modal('show');
            });
            $(self.$el).on("click", ".detail", function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                self.item = dataArray;
                dataArray.orderDate = dateTransform(dataArray.orderDate);
                $(self.$els.detailModal).modal('show');
            });
        }
    }
</script>
